<!DOCTYPE html>
<html lang="en">

<head>
    <title>My BCIT Project</title>
    <meta name="comp2800 template" content="My 2800 App">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap Library CSS JS CDN go here -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"> </script>

    <!-- 引入 Chart.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <!-- Other libraries and styles of your own -->
    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->
    <style>
        /* 统一字体和颜色 */
        body {
            font-family: Arial, sans-serif;
            color: #333;
            margin: 0;
            padding: 0;
            /* 添加背景图片相关属性 */
            background-image: url('images/jj.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        /* 头部样式 */
        .head {
            width: 100%;
            margin: 0 auto;
            padding: 20px;
        }

        .head h3,
        .head h4,
        .head h5 {
            margin-bottom: 10px;
        }

        h2 {
            text-align: center;
        }

        /* 选项列表样式 */
        .options {
            list-style-type: none;
            padding: 0;
            display: flex;
            justify-content: space-around;
            margin-top: 10px;
        }

        .options li {
            background-color: #f0f0f0;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .options li.active,
        .options li:hover {
            background-color: #3B82F6;
            color: white;
        }

        /* 平均信息样式 */
        h3,
        h4,
        h5 {
            text-align: left;
        }

        h2,
        h3,
        h4,
        h5 {
            margin-bottom: 10px;
        }

        /* 新增：卡路里进度条样式 */
        .calorie-progress {
            margin-top: 20px;
        }

        .progress-bar {
            transition: width 1s ease-in-out;
        }

        /* 新增：卡路里数据卡片样式 */
        .calorie-card {
            background-color: white;
            border-radius: 10px;
            padding: 15px;
            margin: 15px 0;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .calorie-value {
            font-size: 24px;
            font-weight: bold;
            color: #3B82F6;
        }

        .update-time {
            font-size: 12px;
            color: #666;
        }

        .navbar {
            background-color: lightskyblue;
            /* 导航栏背景色 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            /* 阴影效果 */
        }

        .navbar-brand {
            display: flex;
            /* 弹性布局，用于水平排列logo和标题 */
            align-items: center;
            /* 垂直居中 */
        }

        .navbar-brand span {
            font-weight: 600;
            /* 标题字体加粗 */
            margin-left: 0.5rem;
            /* 标题与logo间距 */
        }

        .navbar-nav .nav-link {
            /* 继承Bootstrap默认样式，无额外自定义样式 */
        }

        .navbar-nav .nav-link.active {
            /* Bootstrap默认激活状态样式 */
        }

        .btn-outline-success {
            /* 继承Bootstrap按钮样式 */
        }

        footer {
            background-color: #212529;
            /* 深灰色背景（bg-dark类对应Bootstrap默认色） */
            color: white;
            /* 文本颜色 */
            padding: 1rem 0;
            /* 垂直内边距 */
            text-align: center;
            /* 内容居中 */
        }

        footer .container {
            /* 继承Bootstrap容器样式 */
        }

        footer p {
            margin-bottom: 0.5rem;
            /* 版权文本底部间距 */
        }

        footer .mt-2 {
            margin-top: 0.5rem;
            /* 图标区域顶部间距 */
        }

        footer a {
            color: white;
            /* 图标链接颜色 */
            margin: 0 0.5rem;
            /* 图标左右间距 */
            transition: color 0.3s;
            /* 鼠标悬停动画过渡 */
        }

        footer a:hover {
            color: #007bff;
            /* 鼠标悬停时变为蓝色（可自定义） */
        }
    </style>
</head>

<body>
    <!-- Your HTML Layout go here -->

    <!-- our own navbar goes here -->
    <nav class="navbar navbar-expand-lg navbar-light"
        style="background-color: lightskyblue; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
        <div class="container-fluid">
            <!-- 品牌logo和标题 -->
            <a class="navbar-brand d-flex align-items-center" href="#">
                <img src="../images/biaoti.png" height="36" alt="Health Bot Logo">
                <span class="ms-2" style="font-weight: 600;">Health Bot</span>
            </a>

            <!-- 导航菜单项 -->
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" href="../aboutus.html">About Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../main.html">Health</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../history.html">History</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../delete_user.html">Delete</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../profile.html">Profile</a>
                    </li>
                </ul>

                <!-- 右侧退出按钮 -->
                <div class="d-flex">
                    <a class="btn btn-outline-success" href="../login.html">
                        <i class="fa fa-sign-out mr-1"></i> Logout
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <div class="head">
        <h2>Active energy</h2>
        <ul class="options" id="timeOptions">
            <li class="active" data-period="day">day</li>
            <li data-period="week">week</li>
            <li data-period="month">month</li>
            <li data-period="sixMonths">Six months</li>
            <li data-period="year">year</li>
        </ul>
        <h3>average</h3>
        <h3><a href="../kall.html">compute</a></h3>
        <h4 id="averageCalories">618kcal</h4>
        <h5 id="dateRange">February 11 to March 13, 2025</h5>

        <!-- 新增：今日卡路里消耗卡片 -->
        <div class="calorie-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p id="periodLabel">今日卡路里消耗</p>
                    <p class="calorie-value" id="totalCalories">618 kcal</p>
                </div>
                <div class="text-right">
                    <p>目标</p>
                    <p class="font-weight-bold" id="periodGoal">2000 kcal</p>
                </div>
            </div>

            <!-- 新增：卡路里进度条 -->
            <div class="calorie-progress">
                <div class="progress">
                    <div class="progress-bar bg-primary" id="calorieProgressBar" role="progressbar" style="width: 30.9%"
                        aria-valuenow="618" aria-valuemin="0" aria-valuemax="2000"></div>
                </div>
                <p class="text-right update-time">
                    上次更新: <span id="lastUpdateTime">--:--:--</span>
                </p>
            </div>
        </div>

        <!-- 显示时间的元素 -->
        <div id="clock"></div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
                <img src="images/zxt.jpg" class="card-img-top" alt="zxt" width="100%" height="225">
                <div class="card-body">
                    <p class="card-text">Changes in heart rate (HR) of different exercise equipment (e.g., treadmills,
                        elliptical machines, etc.) under different levels of perceived exertion (RPE). Through the
                        analysis of charts, it can help sports enthusiasts reasonably plan the exercise intensity and
                        choose the right exercise equipment for themselves.</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                        </div>
                        <small class="text-muted">9 mins</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
                <img src="images/uu.jpg" class="card-img-top" alt="uu" width="100%" height="225">
                <div class="card-body">
                    <p class="card-text">The running infographic presents key data during the running process, including
                        different stages of exercise data, such as speed, heart rate, etc., which can help runners
                        understand their exercise status, optimize their running strategies, and improve their running
                        performance.</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                        </div>
                        <small class="text-muted">9 mins</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
                <img src="images/fire.jpg" class="card-img-top" alt="fire" width="100%" height="225">
                <div class="card-body">
                    <p class="card-text">Calorie expenditure for a variety of daily activities and sports is detailed.
                        Whether it is daily housework or fitness exercise, it can help people intuitively understand
                        calorie consumption, plan daily activities reasonably, and help healthy life.</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                        </div>
                        <small class="text-muted">9 mins</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加一个新的行用于放置柱形图 -->
    <div class="row">
        <div class="col-md-12">
            <div class="card mb-4 shadow-sm">
                <div class="card-body">
                    <h4 id="chartTitle">Daily Energy Consumption</h4>
                    <!-- 用于显示柱形图的 canvas 元素 -->
                    <canvas id="energyChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- our own footer goes here-->
    <footer class="bg-dark text-white py-3 text-center">
        <div class="container">
            <!-- 版权信息 -->
            <p>&copy; 2025 Health Bot. All rights reserved.</p>

            <!-- 社交媒体图标 -->
            <div class="mt-2">
                <a href="#" class="text-white mx-2"><i class="fa fa-facebook"></i></a>
                <a href="#" class="text-white mx-2"><i class="fa fa-twitter"></i></a>
                <a href="#" class="text-white mx-2"><i class="fa fa-instagram"></i></a>
            </div>
        </div>
    </footer>

    <!-- Your own JavaScript functions go here -->
    <script src="./scripts/skeleton.js"></script>
    <!-- <script src="./scripts/script.js"></script> -->
    <script>
        // 时钟更新函数
        function updateClock() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            const clockElement = document.getElementById('clock');
            clockElement.innerHTML = `Current Time: ${hours}:${minutes}:${seconds}`;
        }

        // 获取当前格式化时间
        function getFormattedTime() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            return `${hours}:${minutes}:${seconds}`;
        }

        // 模拟卡路里数据更新
        function updateCalorieData() {
            const todayCaloriesElement = document.getElementById('totalCalories');
            const progressBarElement = document.getElementById('calorieProgressBar');
            const lastUpdateTimeElement = document.getElementById('lastUpdateTime');

            // 获取当前卡路里值
            let currentCalories = parseInt(todayCaloriesElement.textContent);

            // 如果是日视图，才进行实时更新
            if (currentPeriod === 'day') {
                // 生成10-30之间的随机增量
                const increment = Math.floor(Math.random() * 21) + 10;
                const newCalories = currentCalories + increment;

                // 卡路里上限为日目标
                const goal = parseInt(document.getElementById('periodGoal').textContent);
                const cappedCalories = Math.min(newCalories, goal);

                // 更新卡路里显示
                todayCaloriesElement.textContent = `${cappedCalories} kcal`;

                // 更新进度条
                const progressPercentage = (cappedCalories / goal) * 100;
                progressBarElement.style.width = `${progressPercentage}%`;
                progressBarElement.setAttribute('aria-valuenow', cappedCalories);

                // 更新平均卡路里
                document.getElementById('averageCalories').textContent = `${cappedCalories}kcal`;
            }

            // 更新最后更新时间
            lastUpdateTimeElement.textContent = getFormattedTime();

            // 模拟数据更新动画
            progressBarElement.classList.add('bg-success');
            setTimeout(() => {
                progressBarElement.classList.remove('bg-success');
            }, 1000);

            // 如果达到或超过目标，添加特殊效果
            const goal = parseInt(document.getElementById('periodGoal').textContent);
            const current = parseInt(document.getElementById('totalCalories').textContent);
            if (current >= goal) {
                progressBarElement.classList.add('bg-warning');
                setTimeout(() => {
                    progressBarElement.classList.remove('bg-warning');
                }, 2000);
            }
        }

        // 图表数据更新
        function updateChartData(increment) {
            // 如果是日视图，才进行实时更新
            if (currentPeriod === 'day') {
                // 获取随机活动索引
                const randomIndex = Math.floor(Math.random() * 7);

                // 更新图表数据
                energyChart.data.datasets[0].data[randomIndex] += increment;
                energyChart.update();
            }
        }

        // 时间周期数据
        const periodData = {
            day: {
                totalCalories: 618,
                goal: 2000,
                average: 618,
                dateRange: "Today",
                label: "今日卡路里消耗",
                chartTitle: "Daily Energy Consumption",
                chartLabels: ["跑步", "游泳", "骑自行车", "健身", "走路", "爬山", "瑜伽"],
                chartData: [180, 120, 90, 140, 60, 28, 0]
            },
            week: {
                totalCalories: 4200,
                goal: 14000,
                average: 600,
                dateRange: "This Week",
                label: "本周卡路里消耗",
                chartTitle: "Weekly Energy Consumption",
                chartLabels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                chartData: [650, 580, 620, 590, 680, 630, 450]
            },
            month: {
                totalCalories: 18500,
                goal: 20000,
                average: 617,
                dateRange: "This Month",
                label: "本月卡路里消耗",
                chartTitle: "Monthly Energy Consumption",
                chartLabels: ["第1周", "第2周", "第3周", "第4周"],
                chartData: [4200, 4600, 4800, 4900]
            },
            sixMonths: {
                totalCalories: 110000,
                goal: 120000,
                average: 604,
                dateRange: "Last 6 Months",
                label: "半年卡路里消耗",
                chartTitle: "6-Month Energy Consumption",
                chartLabels: ["9月", "10月", "11月", "12月", "1月", "2月"],
                chartData: [18000, 19500, 20000, 17500, 18000, 17000]
            },
            year: {
                totalCalories: 220000,
                goal: 250000,
                average: 603,
                dateRange: "This Year",
                label: "年度卡路里消耗",
                chartTitle: "Yearly Energy Consumption",
                chartLabels: ["Q1", "Q2", "Q3", "Q4"],
                chartData: [55000, 58000, 53000, 54000]
            }
        };

        // 当前选中的时间周期
        let currentPeriod = 'day';

        // 切换时间周期
        function switchPeriod(period) {
            // 更新UI状态
            document.querySelectorAll('#timeOptions li').forEach(li => {
                li.classList.remove('active');
                if (li.dataset.period === period) {
                    li.classList.add('active');
                }
            });

            // 更新当前周期
            currentPeriod = period;

            // 获取对应周期的数据
            const data = periodData[period];

            // 更新显示内容
            document.getElementById('totalCalories').textContent = `${data.totalCalories} kcal`;
            document.getElementById('periodGoal').textContent = `${data.goal} kcal`;
            document.getElementById('averageCalories').textContent = `${data.average}kcal`;
            document.getElementById('dateRange').textContent = data.dateRange;
            document.getElementById('periodLabel').textContent = data.label;
            document.getElementById('chartTitle').textContent = data.chartTitle;

            // 更新进度条
            const progressBarElement = document.getElementById('calorieProgressBar');
            const progressPercentage = (data.totalCalories / data.goal) * 100;
            progressBarElement.style.width = `${progressPercentage}%`;
            progressBarElement.setAttribute('aria-valuenow', data.totalCalories);

            // 更新图表
            energyChart.data.labels = data.chartLabels;
            energyChart.data.datasets[0].data = data.chartData;
            energyChart.update();

            // 更新最后更新时间
            document.getElementById('lastUpdateTime').textContent = getFormattedTime();
        }

        // 页面加载时初始化
        window.onload = function () {
            // 初始化时钟
            updateClock();
            setInterval(updateClock, 1000);

            // 初始化卡路里数据
            document.getElementById('lastUpdateTime').textContent = getFormattedTime();

            // 配置和绘制能量消耗柱形图
            const ctx = document.getElementById('energyChart').getContext('2d');
            window.energyChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: periodData.day.chartLabels,
                    datasets: [{
                        label: '卡路里消耗 (kcal)',
                        data: periodData.day.chartData,
                        backgroundColor: [
                            'rgba(75, 192, 192, 0.7)',
                            'rgba(255, 99, 132, 0.7)',
                            'rgba(255, 205, 86, 0.7)',
                            'rgba(54, 162, 235, 0.7)',
                            'rgba(153, 102, 255, 0.7)',
                            'rgba(255, 159, 64, 0.7)',
                            'rgba(220, 53, 69, 0.7)'
                        ],
                        borderColor: [
                            'rgba(75, 192, 192, 1)',
                            'rgba(255, 99, 132, 1)',
                            'rgba(255, 205, 86, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)',
                            'rgba(220, 53, 69, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: '卡路里'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: '周期'
                            }
                        }
                    },
                    animation: {
                        duration: 1000,
                        easing: 'easeOutQuart'
                    }
                }
            });

            // 为时间选项添加点击事件
            document.querySelectorAll('#timeOptions li').forEach(li => {
                li.addEventListener('click', () => {
                    switchPeriod(li.dataset.period);
                });
            });

            // 立即更新一次卡路里数据
            updateCalorieData();

            // 每30秒更新一次卡路里数据（仅在日视图下）
            setInterval(updateCalorieData, 30000);
        };
    </script>
</body>

</html>